import BaseComponent from "../../../pages/BaseComponent";
import {Image, View} from "@tarojs/components";
import "./index.less"
import "./dj/dj0.less"
import Switch from "../../base/Switch";
import LogService from "../../../service/LogService";
import {observer} from "mobx-react";
import {observable} from "mobx";

@observer
export default class Index extends BaseComponent {

  @observable checked = false;
  @observable soundLevel = 0;
  @observable chosIndex = 0;

  static defaultProps = {
    title: "",
    size: 1,
    classPrex: '',
    tipImage: ''
  };

  render() {

    const {title, size, classPrex, tipImage, disabled, style} = this.props;

    // const paddingTop = this.statusBarHeight;
    const switchProps = {
      checked: this.checked, offColor: '#323337', onColor: '#E8AF1B', onHandleColor: '#6B6B6B',
      offHandleColor: '#6B6B6B', width: 50, height: 25, disabled: disabled
    };

    const className = 'dj_sound_progress_item';
    const classNameChose = 'dj_sound_progress_item.chose';

    const views = [];
    for (let i = 0; i < size; i++) {
      let className = this.chosIndex == i ? classPrex + (i + 1) + '.press' : classPrex + (i + 1);
      views.push(<View className={className} onClick={() => {
        if (!disabled)
          this.chosIndex = i
      }
      }></View>);
      if (i < size - 1)
        views.push(<View className='line'></View>);
    }

    return (
      <View className='dj' style={style}>
        <View className='content'>

          <View className='dj_light_title'>{title}</View>
          <View className='dj_color_title'>色彩组</View>
          <View className='light_list'>
            {
              views
            }
          </View>
          <View className='dj_sound_title'>声音强度</View>
          <View className='dj_sound_progress_view'>
            <View className={this.soundLevel == 0 ? classNameChose : className} onClick={() => {
              if (!disabled)
                this.soundLevel = 0;
            }}>弱</View>
            <View className='line'></View>
            <View className={this.soundLevel == 1 ? classNameChose : className} onClick={() => {
              if (!disabled)
                this.soundLevel = 1;
            }}>中</View>
            <View className='line'></View>
            <View className={this.soundLevel == 2 ? classNameChose : className} onClick={() => {
              if (!disabled)
                this.soundLevel = 2;
            }}>高</View>
          </View>
          <View className='dj_sound_title'>声控</View>
          <Switch {...switchProps} className='dj_sound_switch'
                  onChange={() => {
                    this.checked = !this.checked;
                    LogService.debug("Switch onChange", this.checked);
                  }}
          />
        </View>
        {
          !!tipImage && <Image
            className='dj_tip'
            src={tipImage}
          />
        }
      </View>
    );
  }
}
